<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		* {
			padding: 0px;
			margin: 0px;
		}
		
		a {
			text-decoration: none;
		}
		
		ul {
			list-style: outside none none;
		}
		
		.slider,
		.slider-panel img,
		.slider-extra {
			width: 650px;
			height: 413px;
		}
		
		.slider {
			text-align: center;
			margin: 30px auto;
			position: relative;
		}
		
		.slider-panel,
		.slider-nav,
		.slider-pre,
		.slider-next {
			position: absolute;
			z-index: 8;
		}
		
		.slider-panel {
			position: absolute;
		}
		
		.slider-panel img {
			border: none;
		}
		
		.slider-extra {
			position: relative;
		}
		
		.slider-nav {
			margin-left: -91px;
			position: absolute;
			left: 50%;
			bottom: 20px;

			border-radius: 20px;
			background-color: hsla(0, 0%, 100%, .3);
			padding: 5px 8px;
		}
		
		.slider-nav li {
			background: white;
			border-radius: 50%;
			color: #fff;
			cursor: pointer;
			margin: 0 2px;
			overflow: hidden;
			text-align: center;
			display: inline-block;
			height: 12px;
			line-height: 12px;
			width: 12px;
		}
		
		.slider-nav .slider-item-selected {
			background: #DB192A;
		}
		
		.slider-page a {
			background: rgba(0, 0, 0, 0.2);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000);
			color: #fff;
			text-align: center;
			display: block;
			font-family: "simsun";
			font-size: 22px;
			width: 28px;
			height: 62px;
			line-height: 62px;
			margin-top: -31px;
			position: absolute;
			top: 50%;
		}

		
		.slider-next {
			left: 100%;
			margin-left: -28px;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			var length,
				currentIndex = 0,
				interval,
				hasStarted = false, //是否已经开始轮播 
				t = 3000; //轮播时间间隔 
			length = $('.slider-panel').length;
			//将除了第一张图片隐藏 
			$('.slider-panel:not(:first)').hide();
			//将第一个slider-item设为激活状态 
			$('.slider-item:first').addClass('slider-item-selected');
			//隐藏向前、向后翻按钮 
			$('.slider-page').hide();
			//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动 
			$('.slider-panel, .slider-pre, .slider-next').hover(function() {
				stop();
				$('.slider-page').show();
			}, function() {
				$('.slider-page').hide();
				start();
			});
			$('.slider-item').hover(function(e) {
				stop();
				var preIndex = $(".slider-item").filter(".slider-item-selected").index();
				currentIndex = $(this).index();
				play(preIndex, currentIndex);
			}, function() {
				start();
			});
			$('.slider-pre').unbind('click');
			$('.slider-pre').bind('click', function() {
				pre();
			});
			$('.slider-next').unbind('click');
			$('.slider-next').bind('click', function() {
				next();
			});
			/** 
			 * 向前翻页 
			 */
			function pre() {
				var preIndex = currentIndex;
				currentIndex = (--currentIndex + length) % length;
				play(preIndex, currentIndex);
			}
			/** 
			 * 向后翻页 
			 */
			function next() {
				var preIndex = currentIndex;
				currentIndex = ++currentIndex % length;
				play(preIndex, currentIndex);
			}
			/** 
			 * 从preIndex页翻到currentIndex页 
			 * preIndex 整数，翻页的起始页 
			 * currentIndex 整数，翻到的那页 
			 */
			function play(preIndex, currentIndex) {
				$('.slider-panel').eq(preIndex).fadeOut(500)
					.parent().children().eq(currentIndex).fadeIn(1000);
				$('.slider-item').removeClass('slider-item-selected');
				$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
			}
			/** 
			 * 开始轮播 
			 */
			function start() {
				if(!hasStarted) {
					hasStarted = true;
					interval = setInterval(next, t);
				}
			}
			/** 
			 * 停止轮播 
			 */
			function stop() {
				clearInterval(interval);
				hasStarted = false;
			}
			//开始轮播 
			start();
		});
	</script>
	</head>

	<body>
		<img alt="" class="J_slider_item_img slider_item_img">
		<div class="slider">
			<ul class="slider-main">

				<li class="slider-panel">
					<img src="//img20.360buyimg.com/da/jfs/t14035/180/2227944350/97115/a65e3b2/5a3a924aN24661191.jpg">
				</li>
				<li class="slider-panel">
					<img src="//img1.360buyimg.com/da/jfs/t12280/52/2362740590/91389/5c8dcece/5a3b9621Nde4b479a.jpg">
				</li>
				<li class="slider-panel">
					<img src="//img1.360buyimg.com/da/jfs/t12205/161/2178669802/191232/c07b03ac/5a387848N03d48f68.jpg">
				</li>

				<li class="slider-panel">
					<img src="//img12.360buyimg.com/babel/jfs/t14938/284/787979161/154084/1c2af684/5a38d0a8N0ab7dab3.jpg">
				</li>

				<li class="slider-panel">
					<img src="//img1.360buyimg.com/da/jfs/t12352/41/2349526840/87437/cc8986d8/5a3b5792N6fa5c6b2.jpg">
				</li>

				<li class="slider-panel">
					<img alt="12.22-12.25-果蔬" src="//img14.360buyimg.com/babel/jfs/t15988/191/472693259/72255/e18391b4/5a323c24N87d17156.jpg">
				</li>
				<li class="slider-panel">
					<img alt="12.25-肉禽" src="//img10.360buyimg.com/babel/jfs/t14509/43/876897653/82341/1f0965e8/5a3b80ebN66e2b5ad.jpg">
				</li>

				<li class="slider-panel">
					<img alt="12.25-海产" src="//img11.360buyimg.com/babel/jfs/t15145/345/748909387/159696/f0073863/5a3781f3N0fc22110.jpg">
				</li>
			</ul>
			<div class="slider-extra">
				<ul class="slider-nav">
					<li class="slider-item"></li>
					<li class="slider-item"></li>
					<li class="slider-item"></li>
					<li class="slider-item"></li>
					<li class="slider-item"></li>
					<li class="slider-item"></li>
					<li class="slider-item"></li>
					<li class="slider-item"></li>
				</ul>
				<div class="slider-page">
					<a class="slider-pre" href="javascript:;;">
						<</a>
							<a class="slider-next" href="javascript:;;">></a>
				</div>
			</div>
		</div>
	</body>

</html>